<template>
  <div class="Form">
    <Dialog v-model:visible="visible" :title="tit " @handleClickConfirm="handleConfirm" :showCancel="showCancel">
      <el-form :model="formData" label-width="120px" ref="deptRef"  :disabled="formDis">
        <el-form-item v-for="item in formList" :key="item.prop" :label="item.type !='divider'?item.label:''" :prop="item.prop" :label-width="item.type !='divider' ?'120px':'0'">
          <el-input v-if="item.type == 'text'" v-model="formData[item.prop]" size="large" :readonly="item.readonly" :disabled="item.disabled" :placeholder="'请输入' + item.label"/>
          <el-input v-if="item.type == 'value'" v-model="formData[item.prop]" size="large" :readonly="item.readonly" :disabled="item.disabled" :placeholder="'请输入' + item.label"/>
          <el-input v-if="item.type == 'textarea'" v-model="formData[item.prop]" type="textarea" :readonly="item.readonly" :disabled="item.disabled" :autosize="{ minRows: 2, maxRows: 4 }"  size="large" :placeholder="'请输入' + item.label"/>
          <el-select v-if="item.type == 'select'" v-model="formData[item.prop]" :placeholder="'请选择' + item.label" :multiple="item.multiple"  size="large" :disabled="item.disabled" style="width: 100%;">
            <el-option
              v-for="opt in item.list"
              :key="opt.label"
              :label="opt.label"
              :value="opt.label"
            />
          </el-select>
          <el-radio-group v-if="item.type == 'radio'" v-model="formData[item.prop]" :disabled="item.disabled">
            <el-radio v-for="radio in item.list" :key="radio.label" :label="radio.label">{{ radio.label }}</el-radio>
          </el-radio-group>
          <el-checkbox-group  v-if="item.type == 'checkbox'" v-model="formData[item.prop]">
            <el-checkbox v-for="check in item.list" :key="check.label" :label="check.label" />
          </el-checkbox-group>
          <el-date-picker
            v-if="item.type == 'daterange'"
            style="width: 100%;"
            v-model="formData[item.prop]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
          />
          <el-date-picker
            v-if="item.type == 'date'"
            style="width: 100%;"
            v-model="formData[item.prop]"
            type="date"
            placeholder="请选择日期"
            size="large"
            :disabled="item.disabled"
          />
          <el-tree-select
            v-if="item.type == 'treeSelect'"
            v-model="formData[item.prop]"
            :data="item.list"
            :placeholder="'请选择' + item.label"
            size="large"
            check-strictly
            style="width: 100%;"
            :props="{value:'label', label:'label', children:'children'}"
            :render-after-expand="false"
          />
          <el-upload
            v-if="item.type == 'uploadImg'"
            :limit="item.limit"
            v-model:file-list="fileList"
            action=""
            :auto-upload="false"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-image v-if="item.type == 'image'" style="width: 100px; height: 100px" v-for="item in formData[item.prop]" :key="item" :src="item" fit="cover" />
          <el-divider v-if="item.type == 'divider'" content-position="left">{{ item.label }}</el-divider>
          <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script setup>
  const { proxy } = getCurrentInstance();
  const visible = ref(false);
  const props = defineProps({
    formList:{
      type:Array,
      default:() => []
    }
  })
  let formData = ref({});
  const fileList = ref([])
  function initForm() {
    formData.value = {};
    proxy.resetForm("deptRef");
    nextTick(()=>{
      props.formList.map(item=>{
        if (item.type == "value" && !formData.value[item.prop]) {
          formData.value[item.prop] = item.default;
        }
      })
    })
  }
  const tit = ref("");
  const formDis = ref(false);
  const showCancel = ref(true);
  const init = (e) => {
    initForm();
    tit.value = e.title;
    showCancel.value = e.title != "查看";
    formDis.value = e.title == "查看";
    fileList.value = [];
    if (e.row) Object.assign(formData.value, e.row);
    if (e.row && e.row.fileList) {
      fileList.value = e.row.fileList.map((item,i)=>({name:i, url:item}));
    }
    visible.value = true;
  };
  // 表单提交
  const emits = defineEmits(["success"]);
  const handleConfirm = () => {
    success(tit.value)
  }
  const success = (msg) => {
    visible.value = false;
    proxy.$modal.msgSuccess(msg + "成功");
    emits("success");
  }
  defineExpose({
    init
  });
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>